<template>
    <div class="fillcontain">
        <el-form  :inline="true"  ref="form" :model="form" label-width="80px">
        <el-form-item label="手机号">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item style="float:right">
            <el-button type="primary" icon="el-icon-plus" @click="onAdd">新增</el-button>
        </el-form-item>
        </el-form>

        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                
                <el-table-column type="index" width="100"></el-table-column>
                <el-table-column property="personId" label="ID" width="160"></el-table-column>
                <el-table-column property="personName" label="管理员名称" width="160"></el-table-column>
                <el-table-column property="rydm" label="管理员账号" width="160"></el-table-column>
                <el-table-column property="status" label="状态" ></el-table-column>
                
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">修改密码</el-button>
                        <!-- <el-button type="text" size="small">编辑</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
            </div>
        </div>
        <!-- Form -->
<!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->

        <el-dialog title="添加管理员" :close-on-click-modal="false" @open="dialogFormOpenFn" :visible.sync="dialogFormVisible">
        <el-form :model="addform">
            <!-- personcode 用户名
        personname: 用户姓名
        password: 密码 -->
            <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="addform.personcode" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名" :label-width="formLabelWidth">
            <el-input v-model="addform.personname" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="addform.password" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSubmit">确 定</el-button>
        </div>
        </el-dialog>
        <el-dialog title="修改密码" @open="dialogpwdOpenFn" :close-on-click-modal="false" :visible.sync="dialogpwdFlag">
        <el-form :model="pwdform">
            <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="pwdform.personcode" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名" :label-width="formLabelWidth">
            <el-input :disabled="true"  v-model="pwdform.personname" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth">
                <el-input type="password" v-model="pwdform.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth">
                <el-input type="password" v-model="pwdform.password2" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogpwdFlag = false">取 消</el-button>
            <el-button type="primary" @click="pwdSubmit">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 110px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import headTop from "../components/headTop";
import { getUserList, getUserCount } from "@/api/getData";
import { getPersons, updatePersonPwd, addPerson } from "@/api/getData";
import { getStore } from "@/config/mUtils";
export default {
  data() {
    return {
      form: {
        phone: "",
        cardUnitId: "0"
      },
      unitArr: ["佳惠"],
      czlxArr: ["冻结", "解冻"],
      statusArr: ["正常", "停用"],
      dialogFormVisible: false,
      dialogpwdFlag: false,
      fullscreenLoading: false,
      addform: {
        personcode: "",
        personname: "",
        password: "",
        token: ""
      },
      pwdform: {
        personcode: "",
        // oldpassword: "",
        password: "",
        password2: "",
        token: ""
      },
      formLabelWidth: "120px",
      tableData: [
        //     {
        // //   "personId": 1, //id
        // "personName": "administrator", //管理员名称
        // "rydm": "admin", //管理员账号
        // "status": 0 //状态 0：正常 1：停用
        // },
      ],
      currentRow: null,
      offset: 0,
      limit: 20,
      count: 0,
      currentPage: 1
    };
  },
  components: {
    headTop
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      this.getPersons();
      try {
        // const countData = await getUserCount();
        // if (countData.status == 1) {
        //     this.count = countData.count;
        // }else{
        //     throw new Error('获取数据失败');
        // }
      } catch (err) {
        console.log("获取数据失败", err);
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.offset = (val - 1) * this.limit;
    },
    async getPersons() {
      const res = await getPersons({
        token: getStore("token"),
        phone: this.form.phone
      });
      console.log(res);

      if (res.retcode == "00") {
        this.tableData = [];
        if (res.data) {
          this.count = res.data.length;

          res.data.forEach(item => {
            item.czlx = this.czlxArr[item.cardUnitId];
            item.status = this.statusArr[item.status];
            this.tableData.push(item);
          });
        }
      } else {
        this.$message.error(res.retmsg);
      }
      // this.tableData = [];
    },
    //  创建管理员
    onAdd() {
      console.log("ddd");
      this.dialogFormVisible = true;
    },
    dialogFormOpenFn(){
        console.log(11);
        this.addform={
            personcode: "",
            personname: "",
            password: "",
            token: ""
        }
        // Object.assign(this.addform,{
        //     personcode: "",
        //     personname: "",
        //     password: "",
        //     token: ""
        // })
        
    },
    dialogpwdOpenFn(){
        
        this.pwdform.password=''
        this.pwdform.password2=''
        
    },
    onSubmit() {
      console.log("ddd");
      this.getPersons();
    },
    addSubmit() {
      console.log("ddd");
      this.dialogFormVisible = false;
      this.openFullScreen2();
      this.addPerson();
    },
    // 创建管理员
    async addPerson() {
      const res = await addPerson({
        personcode: this.addform.personcode,
        personname: this.addform.personname,
        password: this.addform.password,
        token: getStore("token")
      });
      if (res.retcode == "00") {
        this.getPersons();
        // this.tableData = res.data;
      } else {
      }
    },
    openFullScreen2() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        this.loading.close();
      }, 2000);
    },
    handleClick(row) {
      console.log(row);
      this.dialogpwdFlag = true;
      this.row = row;
      this.pwdform.personcode = row.rydm;
      this.pwdform.personname = row.personName;
    },
    async updatePersonPwd() {
      const res = await updatePersonPwd({
        token: getStore("token"),
        personcode: this.pwdform.personcode, // 用户名
        // oldpassword: this.pwdform.oldpassword, //: 用户姓名
        password: this.pwdform.password //: 密码
      });
      console.log(res);

      if (res.retcode === "00") {
        this.dialogpwdFlag = false;
        this.$message.success(res.retmsg);
      } else {
        this.$message.error(res.retmsg);
      }
      // this.tableData = [];
    },
    pwdSubmit(row) {
      console.log(row);
      row = this.row;
      var p1 = this.pwdform.password;
      var p2 = this.pwdform.password2;
      if (!p1 || !p2) {
        this.$message.error("密码不能为空！");
        return;
      }
      if (p1 != p2) {
        this.$message.error("密码输入不一致！");
        return;
      }
      this.$confirm("此操作将修改密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.updatePersonPwd(row); //提交方法
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style lang="less">
@import "../style/mixin";
.table_container {
  padding: 20px;
}
</style>
